<template>
  <div class="engineerdetails">
    <!-- 按钮区域 -->
    <div class="btns" >
        <el-form :inline="true"  :model="params" class="demo-form-inline">
  <el-form-item>
    <el-select 
    v-model="params.charge_id" 
    placeholder="请选择区域经理" clearable>
     <el-option
              v-for="(item, index) in manager"
              :key="index"
              :label="item.realname"
              :value="item.id"
            ></el-option>
            </el-select>
   
  </el-form-item>
  <el-form-item>
    <el-select 
    v-model="params.customer_id" 
    placeholder="请选择客户" clearable>
     <el-option
              v-for="(item, index) in customer"
              :key="index"
              :label="item.realname"
              :value="item.id"
            ></el-option>
            </el-select>
    
  </el-form-item>
    
    <el-form-item>  
    <el-button type="primary" @click="toSearchHandler">查询</el-button>
  </el-form-item>
       <el-button type="primary" style="float:right" @click="toAddHandler">添加</el-button>
    </el-form>
    </div>  
    
    <!-- 表格区域 -->
     <div class="table">
        <!-- 下拉显示详细信息  -->
     <el-table :data="resData.list" style="width=100%" size="small">
       <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="工程编号">
            <span>{{ props.row.serial_number }}</span>
          </el-form-item>
          <el-form-item label="工程类型">
            <span>{{ props.row.type }}</span>
          </el-form-item>
          <el-form-item label="工程状态">
            <span>{{ props.row.status}}</span>
          </el-form-item>
          <el-form-item label="客户姓名">
            <span>{{ props.row.customer_name }}</span>
          </el-form-item>
          <el-form-item label="位置纬度">
            <span>{{ props.row.latitude }}</span>
          </el-form-item>
          <el-form-item label="工程名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="工程地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
           <el-form-item label="区域经理">
            <span>{{ props.row.charge_name }}</span>
          </el-form-item> <el-form-item label="客户电话">
            <span>{{ props.row.customer_telephone}}</span>
          </el-form-item> <el-form-item label="位置经度">
            <span>{{ props.row.longitude }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    
    <!-- 表格数据 -->
       <el-table-column   
          label="序号"
          type="index"
          width="60px"
          align="center">
       </el-table-column>
         <el-table-column
           prop="serial_number"
          label="工程编号"
          width="100px"
          align="center">
       </el-table-column>
         <el-table-column  prop="name"
          label="工程名称"
         align="center">
       </el-table-column>
          <el-table-column  prop="type"
          label="工程类型"
          width="100px"
          align="center">
       </el-table-column>
         <el-table-column   prop="charge_name"
          label="区域经理"
          width="80px"
          align="center">
       </el-table-column>
         <el-table-column   prop="customer_name"
         label="客户姓名"
          width="100px"
          align="center">
       </el-table-column>
        <el-table-column   prop="customer_telephone"
         label="客户电话"
          width="130px"
          align="center">
       </el-table-column>
       <el-table-column prop="status"
          label="工程状态"
          width="80px"
          align="center">
           <template v-slot="{row}">
            <el-tag size="mini" v-if="row.status == '监测中'" type="success"
              >监测中</el-tag
            >
             <el-tag size="mini" v-else-if="row.status =='未绑定'" type="info"
              >未绑定设备</el-tag
            >
            <el-tag size="mini" v-else type="danger">已完成</el-tag>
          </template>
       </el-table-column>
         <el-table-column 
         label="操作" 
         width="180px" 
         size="small" 
         align="center">
          <template v-slot="{row}">
            <el-button 
            @click="toEditHandler(row)" 
            type="text" 
            size="small">
            编辑</el-button>
            <el-button 
            :disabled="row.status == '已结束' ? true : false" 
            @click="toBindHandler(row)" 
            type="text" size="small"
            >绑定</el-button>
           <el-button 
           :disabled="row.status == '已结束' ? true : false"
            type="text" 
            @click="toEndHandler(row.id)" 
            size="small"
            >结束</el-button>
          <el-button 
           @click="toDeleteHandler(row.id)" 
           type="text" 
           size="small" 
           style="color: red"
           >删除</el-button>
          </template>
            
          </el-table-column>
     </el-table>
     </div> 

<!-- 模态框 -->
     <el-dialog @close="resetForm(formName)" :title="title" :visible.sync="visible">
         
          <el-form :inline="true" :model="form" :rules="rules" ref="engineerFrom">
      
          <el-form-item prop="serial_number" label="工程编号" :label-width="formLabelWidth">
          <el-input v-model="form.serial_number " autocomplete="off"></el-input>
          </el-form-item>
  
       <el-form-item prop="name" label="工程名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item prop="address" label="工程地址" :label-width="formLabelWidth">
      <el-input v-model="form.address" autocomplete="off"></el-input>
    </el-form-item>
     
       <el-form-item prop="type" label="工程类型" :label-width="formLabelWidth">
      <el-input v-model="form.type" autocomplete="off"></el-input>
    </el-form-item>

      <el-form-item prop="longitude" label="经度" :label-width="formLabelWidth">
      <el-input v-model="form.longitude" autocomplete="off"></el-input>
    </el-form-item>

      <el-form-item prop="latitude" label="纬度" :label-width="formLabelWidth">
      <el-input v-model="form.latitude" autocomplete="off"></el-input>
    </el-form-item>
     
      <el-form-item  prop="charge_id" label="区域经理" :label-width="formLabelWidth">
    <el-select 
    v-model="form.charge_id" 
    placeholder="请选择区域经理" clearable>
     <el-option
              v-for="(item, index) in manager"
              :key="index"
              :label="item.realname"
              :value="item.id"
            ></el-option>
            </el-select>
    
  </el-form-item>
         
       <el-form-item prop="customer_name"  label="客户姓名" :label-width="formLabelWidth">
      <el-input  :disabled="form.id ? true : false" v-model="form.customer_name" autocomplete="off"></el-input>
    </el-form-item>
        <el-form-item prop="customer_telephone" label="客户电话" :label-width="formLabelWidth">

      <el-input :disabled="form.id ? true : false" v-model="form.customer_telephone" autocomplete="off"></el-input>
    
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="toSubmitHandler">确 定</el-button>
  </div>
</el-dialog>
    
      <!-- 分页区域 -->
      
 <div class="block">
    <!-- <span class="demonstration">完整功能</span> -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="parseInt(resData.page)"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="parseInt(resData.pageSize)"
      layout="total, sizes, prev, pager, next, jumper"
      :total="resData.total"
      background
     >
    </el-pagination>
  </div>
  </div>

</template>

<script>
// 导入工具插件
import { get, postJSON,del } from "@/utils/request.js";
import _ from "lodash"
export default {
  data() {

    return {
     
       title:'',
       visible: false,
       form:{},
       formLabelWidth:"120px",
      rules:{
        serial_number: [{ required: true, message: "请输入工程编号", trigger: "blur" }],
         name: [{ required: true, message: "请输入工程名称", trigger: "blur" }], 
         type: [{ required: true, message: "请输入工程类型", trigger: "blur" }],
          address: [{ required: true, message: "请输入工程类型", trigger: "blur" }],
          latitude: [{ required: true, message: "请输入工程纬度", trigger: "blur" }], 
        longitude: [{ required: true, message: "请输入工程经度", trigger: "blur" }],
           charge_id: [{ required: true, message: "请选择区域经理", trigger: "change" }],
           customer_name: [{ required: true, message: "请输入客户姓名", trigger: "blur" }],
       customer_telephone: [
          { required: true, message: "请输入电话", trigger: "blur" },
        ],
      },
      resData: {}, 
      engineers: [],
      params:{
        page:1,
        pageSize:10 ,
      },
      manager: [],    //经理
      customer: [],
    }
  },
  methods: {
    
    // 分页查询工程信息
    pageQueryEngineer() {
      get("/engineer/pageQuery",this.params).then((res) => {
        // 将后台接口的响应结果，赋值给resData
        // console.log(res.data.list)
        this.resData = res.data;
      
      });
    },
    //添加设备按钮
      toAddHandler(){
      this.form={};
      this.title ='添加设备';
      this.visible=true;
    },
    
    // 查询区域经理和客户函数
    cx() {
      //经理
      get('/user/pageQuery', {
        page: 1,
        pageSize: 100,
        role_id: 3
      }).then((res) => {
        this.manager = res.data.list;
      })
      //客户
      get('/user/pageQuery', {
        page: 1,
        pageSize: 100,
        role_id: 4
      }).then((res) => {
        this.customer = res.data.list;
      })
    },
   
   toSubmitHandler(){
      this.$refs["engineerFrom"].validate((valid) => {
      if (valid) {
         postJSON("/engineer/saveOrUpdate", this.form).then((res) => {
          // 数据重载
          this.pageQueryEngineer();
          // 成功提示
          this.$message({
            message: "操作成功",
            type: "success",
          }); 
          // 模态框关闭
          this.visible = false;
        
        });
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  },
   
      resetForm(formName) {
        this.$refs["engineerFrom"].resetFields(); 
        // this.visible = false;
      },
    //分页
    handleSizeChange(pageSize){
// console.log(pageSize);
this.params.pageSize =pageSize;
this.pageQueryEngineer();
    },
    handleCurrentChange(page){
// console.log(page);
this.params.page = page;
this.pageQueryEngineer();

},

      //  查询按钮点击事件
      toSearchHandler() {
    
      // 数据重载
      this.params.page = 1;
      this.pageQueryEngineer();
    },

toEditHandler(row) {
      this.form=_.clone(row);
      this.title = "编辑设备";
      this.visible = true;
    },
    
  
    //结束工程
    toEndHandler(id){
          this.$confirm("此操作将结束该工程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 用户点击确认按钮，然后再做设备的删除
        get("/engineer/finish", { id }).then((res) => {
          // 数据重载
          this.pageQueryEngineer();
          // 提示删除成功
          this.$message.success("结束成功");
        });
      });
    } ,
     //绑定按钮点击事件
     toBindHandler(row) {
     this.$router.push({
        path: "Details",
        query: row,
      });
      },
      //删除确认按钮
      toDeleteHandler(id) {
         this.$confirm("此操作将永久删除该工程, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 用户点击确认按钮，然后再做设备的删除
        del("/engineer/deleteById", { id }).then((res) => {
          // 数据重载
          this.pageQueryEngineer();
          // 提示删除成功
          this.$message.success("删除成功");
        });
      });

      },


  },


  // vue声明周期的钩子函数
  created() {
    // 页面加载，调用查询设备数据的方法
    this.pageQueryEngineer();
    // this.findAllengineers();
    this.cx();
  },
};
</script>